html,body {
height:100%;
width:100%;
font-family:Arial,Helvetica,sans-serif;
user-select:none;
margin:0;
padding:0;
box-sizing:border-box;
overflow:hidden
}

#carhud-main-container {
position:absolute;
width:55.4%;
height:40.6%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background-color:rgba(0,0,0,0.5);
border-radius:2vh;
padding:1%;
color:#fff;
display:none;
transition:400ms width,400ms height;
overflow:hidden
}

#carhud-main-container:hover {
cursor:default
}

.div-izquierda {
position:relative;
width:29.5vh;
height:6vh;
background-color:rgba(0,0,0,0.5);
border:1px solid #0037ff;
border-radius:1vh;
margin-bottom:1.3vh;
padding-left:1.5vh;
display:flex;
align-items:center
}

.div-izquierda i {
font-size:2.2vh;
color:#fff;
margin-right:1vh
}

.div-izquierda p {
font-size:2vh;
color:#fff
}

.progress-container {
position:absolute;
width:17.8vh;
height:1.2vh;
background-color:#000;
border:1px solid #fff;
border-radius:.9vh;
left:11.6vh
}

.progress-inner {
position:absolute;
height:100%;
width:0;
background-color:#0037ff;
border-radius:.9vh;
transition:800ms width
}

.progress-inner p {
position:relative;
color:#fff;
font-size:1vh;
letter-spacing:1px;
text-align:center;
top:-.9vh;
z-index:1.0E+32
}

#div-izquierda-abajo {
position:relative;
width:31vh;
height:11vh
}

.kucuk-itemler {
position:relative;
background-color:rgba(0,0,0,0.5);
width:48.35%;
height:48%;
float:left;
border-radius:.8vh;
border:1px solid #0037ff;
box-sizing:border-box;
display:flex;
justify-content:center;
align-items:center;
transition:300ms width
}

.kucuk-itemler:first-child {
margin-right:1vh
}

.kucuk-itemler:nth-child(3) {
margin-right:1vh
}

.kucuk-itemler:first-child {
margin-bottom:1vh
}

.kucuk-itemler:nth-child(2) {
margin-bottom:1vh
}

.kucuk-itemler:hover {
cursor:pointer
}

.kucuk-itemler i {
font-size:2.2vh;
color:#fff;
margin-right:1vh;
position:relative
}

.kucuk-itemler p {
font-size:2vh;
color:#fff;
position:relative
}

.cardoor {
position:relative;
margin-right:.6vh;
width:3vh;
height:3vh
}

#onoff-button {
position:absolute;
width:6.3vh;
height:6.3vh;
border-radius:50%;
background-color:#000;
border:1px solid #fff;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:flex;
align-items:center;
justify-content:center
}

#onoff-button i {
color:rgba(0,55,255,0.750);
font-size:3vh;
transition:500ms color
}

#onoff-button:hover i {
color:rgba(0,55,255,0.750)
}

#onoff-button:hover {
border-color:#fff;
cursor:pointer
}

#main1 {
width:30.7vh;
position:relative;
float:left
}

#main2 {
float:left;
width:69.6vh;
height:92%;
position:absolute;
left:33vh
}

#car-buttons-cont {
position:absolute;
width:64.5vh;
height:11.5vh;
top:43%;
left:33vh;
padding-left:2%;
padding-right:2%
}

#car-preview {
position:relative;
left:50%;
top:50%;
width:20vh;
height:33vh;
transform:translate(-50%,-50%)
}

.circle-button:hover,.maletero:hover,.square-button:hover {
cursor:pointer;
border-color:rgba(255,255,255,0.863)
}

.maletero {
position:absolute;
width:15vh;
height:4.2vh;
left:50%;
transform:translateX(-50%);
background-color:#000;
border:1px solid #0037ff;
border-radius:10px;
text-align:center;
line-height:4.2vh;
transition:200ms border-color;
box-sizing:border-box
}

.maletero-selected {
border:2px solid rgba(0,55,255,0.87)
}

.maletero-selected:hover {
border:2px solid rgba(0,55,255,0.87)
}

.circle-button {
position:absolute;
width:4.5vh;
height:4.4vh;
border-radius:50%;
background-color:#000;
border:1px solid #0037ff;
box-sizing:border-box;
text-align:center;
line-height:4.4vh;
font-size:2vh;
color:#fff;
transition:200ms border-color
}

.rectangle-button {
position:absolute;
width:19vh;
height:4.2vh;
border-radius:1vh;
background-color:#000;
border:1px solid #0037ff;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
transition:200ms border-color
}

.rectangle-button:hover {
cursor:pointer
}

.rectangle-button svg {
position:relative;
width:2.5vh;
height:2.5vh;
margin-right:.5vh;
top:-.2vh
}

.rectangle-button p {
position:relative;
color:#fff;
font-size:2vh
}

.square-button {
position:absolute;
width:4.5vh;
height:4.5vh;
border-radius:1vh;
background-color:#000;
border:1px solid #0037ff;
box-sizing:border-box;
transition:200ms border-color
}

.square-button svg {
position:absolute;
width:2.5vh;
height:2.5vh;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}

.square-selected {
border:2px solid rgba(218,0,0,0.87)
}

.square-selected:hover {
border:2px solid rgba(0,55,255,0.87)
}

.ripple {
background-position:center;
transition:background .8s
}

.ripple:hover {
background:rgba(55,55,55,0.5) radial-gradient(circle,transparent 1%,rgba(55,55,55,0.5) 1%) center/15000%
}

.ripple:active {
background-color:#292929;
background-size:100%;
transition:background 0s
}

.allnoti {
padding-top:20%;
padding-right:1%
}

.cards {
display:flex;
flex-wrap:wrap;
justify-content:space-between
}

.card {
word-wrap:break-word;
width:300px;
height:auto;
padding:10px;
overflow:hidden;
display:grid;
border-radius:7px;
box-shadow:0 6px 10px rgba(0,0,0,0.25);
transition:all .2s
}

.card__link,.card__exit,.card__icon {
position:relative;
text-decoration:none;
color:rgba(255,255,255,0.9)
}

.card__exit {
grid-row:1/2;
justify-self:end
}

.card__icon {
grid-row:2/3;
font-size:30px;
color:red
}

.card__title {
grid-row:3/4;
font-weight:400;
color:#fff
}

.card-1 {
background:#000;
border-left:3px solid #fff
}

@media (max-width: 1600px) {
.cards {
justify-content:center
}
}